<template>
  <div class="mini-chart">
    <div class="chart-content" :style="{height: 46}">
      <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
        <v-tooltip></v-tooltip>
        <v-smooth-area position="x*y"></v-smooth-area>
      </v-chart>
    </div>
  </div>
</template>

<script lang="es6">
  const cmp = new Promise((resolve, reject) => {
      require([
        'date-fns'
      ], function(DateFns) {
        const format = DateFns.format;
        const data = []
        const beginDay = new Date().getTime()

        const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5];

        for (let i = 0; i < fakeY.length; i += 1) {
          data.push({
            x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'YYYY-MM-DD'),
            y: fakeY[i]
          })
        };

        const tooltip = [
          'x*y',
          (x, y) => ({
            name: x,
            value: y
          })
        ];

        const scale = [{
          dataKey: 'x',
          min: 2
        }, {
          dataKey: 'y',
          title: '时间',
          min: 1,
          max: 22
        }];

        resolve({
          name: 'MiniArea',
          data () {
            return {
              data,
              scale,
              tooltip,
              height: 100
            }
          }
        });
      });
  });

  module.exports = cmp;
</script>

<style scoped>
  .mini-chart {
    position: relative;
    width: 100%
  }
  .mini-chart .chart-content{
    position: absolute;
    bottom: -28px;
    width: 100%;
  }
</style>
